import { Button, Tabs, Text, List, WhiteSpace, Toast } from 'antd-mobile';
import React, { Component } from 'react';
import { AppRegistry, ScrollView, View, FlatList } from 'react-native';
import { StationTemperChart } from './StationTemperChart'
import { Urls } from '../../utils/Urls';

import { NavigationActions } from 'react-navigation'
const loginAction = NavigationActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({ routeName: 'LoginScreen', params: { token: '123456' } })
    ]
})

export class DeviceListScreen extends Component {
    static navigationOptions = ({ navigation }) => ({
        headerTitle: navigation.state.params.title,
        headerTitleStyle: { alignSelf: 'center' }
    });
    constructor(props) {
        super(props)
        this.state = {
            equipments: [],
            keys: [],
            data: [],
            title: ''
        }
    }
    
    componentDidMount() {
        let url = Urls.EQUIPMENT_LIST + "?station_id=" + this.props.navigation.state.params.id;
        fetch(url)
        .then(response => response.json())
        .then(resData => {
                console.log(resData)
                if (resData.code == 0) {
                    
                    // var responsejson = JSON.parse(response._bodyInit);
                    let equipments = resData.content;
                    let keys = [], data = []
                    equipments.forEach(element => {
                        keys.push(element.name)
                        data.push(element.alarms)
                    });
                    this.setState({
                        equipments: equipments,
                        keys: keys,
                        data: data
                    })
                    console.log("更改了数据之后输出一下：：：：：：：");
                } else  if (resData.code == 1) {
                    Toast.fail('登录过期，重新登录', 1);
                    this.props.navigation.dispatch(loginAction)
                }
                // console.log(this.state);
            })
            .catch((error) => {
                console.log(error);
            })
    }
    render() {
        console.log(this.state.data);
        
        const tab = [
            { title: '实时温度棒图' },
            { title: '详细信息' }
        ];
        const { navigate } = this.props.navigation;
        
        return (
            <ScrollView>
                <List>
                    <List.Item extra={ this.state.equipments.length + "个探头"}>{this.props.navigation.state.params.title}</List.Item>
                </List>
                <WhiteSpace size="sm" />
                <Tabs tabs={tab}>
                    <ScrollView>
                        <StationTemperChart keys={this.state.keys} data2={this.state.data}></StationTemperChart>
                    </ScrollView>

                    {/* <ScrollView>
                        <WhiteSpace size="sm" />
                        <List>
                            {list()}
                        </List>
                    </ScrollView> */}
                    <View>
                        <FlatList
                            data={this.state.equipments}
                            renderItem={({ item, index }) => <List.Item key={index}
                                onClick={() => navigate('ItemHistoryScreen', { id: item.id, title: item.name })}
                                extra={"实时温度：" + item.alarms + "℃"} 
                                arrow="horizontal">{item.name}</List.Item>}
                            onEndReached={this._onEndReached}
                        />
                    </View>
                </Tabs>
            </ScrollView>
        );
    }
    _onEndReached = () => {
        // this.setState((state) => ({
        //   data: state.data.concat(genItemData(100, state.data.length)),
        // }));
        console.log("到底部了")
      };
}